<template>
  <div class="post-item">
    <div class="post-item__user">
      <div class="user__avatar">
        <user-avatar :url="item.user.avatarLarge" :round="true"></user-avatar>
      </div>
      <span>{{ item.user.username }} · {{ item.createdAt | formatTime }}</span>
    </div>
    <nuxt-link :to="'/detail/' + detailId" class="post-item__cover" v-if="item.screenshot"
               :style="{'background-image': `url(${item.screenshot})`}" target="_blank"
    ></nuxt-link>
    <h1 class="post-item__title">
      <nuxt-link :to="'/detail/' + detailId" target="_blank">{{ item.title }}</nuxt-link>
    </h1>
    <p class="post-item__content">
      <nuxt-link :to="'/detail/' + detailId" target="_blank">{{ item.content }}</nuxt-link>
    </p>
    <div class="post-item__mate">
      <ul class="meta__action">
        <li class="action-item" :class="{active: item.isCollected}" @click.stop="articleLike">
          <img v-if="item.isCollected" src="https://b-gold-cdn.xitu.io/v3/static/img/zan-active.930baa2.svg"
               class="action-item__icon"
          >
          <img v-else src="https://b-gold-cdn.xitu.io/v3/static/img/zan.e9d7698.svg" class="action-item__icon">
          {{ item.collectionCount }}
        </li>
        <li class="action-item">
          <img class="action-item__icon" src="https://b-gold-cdn.xitu.io/v3/static/img/comment.4d5744f.svg">
          {{ item.commentsCount }}
        </li>
      </ul>
      <div class="meta__info">
        <span class="meta__count">阅读 {{ item.viewsCount }}</span>
        <nuxt-link class="meta__original" :to="'/detail/'+detailId" target="_blank">阅读原文</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        props: {
            item: {
                type: Object,
                default: () => ({})
            }
        },
        data() {
            return {
                likeLoading: false
            }
        },
        computed: {
            detailId() {
                return this.item.originalUrl ? this.item.originalUrl.split('/').pop() : ''
            }
        },
        methods: {
            async articleLike() {
                if (!this.$store.state.auth.token) {
                    this.$loginModal(this)
                    return
                }
                if (this.likeLoading) {
                    return
                }
                let objectId = this.item.objectId
                if (objectId) {
                    this.likeLoading = true
                    let res = await this.$api.articleLike({
                        entryId: objectId,
                        isCollected: !this.item.isCollected
                    })
                    if (res.s === 1) {
                        this.$emit('update:item', {
                            ...this.item,
                            isCollected: !this.item.isCollected,
                            collectionCount: this.item.isCollected ? Number(this.item.collectionCount) - 1 : Number(this.item.collectionCount) + 1

                        })
                    }
                    this.likeLoading = false
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .post-item {
        padding: 30px;
        background: #fff;
        border-top: 1px solid hsla(0, 0%, 59.2%, .1);

        .post-item__user {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            font-size: 14px;
            color: #8b8b8b;

            .user__avatar {
                width: 30px;
                height: 30px;
                margin-right: 10px;
                border-radius: 50%;
                object-fit: cover;
            }
        }

        .post-item__cover {
            display: block;
            height: 210px;
            margin-bottom: 20px;
            background-size: cover;
            background: 50%/cover;
            background-color: #f8f9fa;
            cursor: pointer;
            border-radius: 3px;
        }

        .post-item__title {
            font-size: 24px;
            font-weight: bold;
            color: #000;
            line-height: 1.3;
            cursor: pointer;

            &:hover {
                color: $theme;
            }
        }

        .post-item__content {
            margin-top: 10px;
            font-size: 15px;
            color: #8b8b8b;
            letter-spacing: 1px;
            line-height: 1.5;
            cursor: pointer;
        }
    }

    .post-item__mate {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;

        .meta__action {
            display: flex;
            align-items: center;
            font-weight: 700;
            font-size: 13px;
            color: #b2bac2;

            .action-item {
                display: flex;
                align-items: center;
                height: 26px;
                padding: 0 10px;
                border: 1px solid #edeeef;
                cursor: pointer;

                .action-item__icon {
                    margin-right: 3px;
                }

                &.active {
                    color: $success;
                }

                &:last-child {
                    border-left: 0;
                }
            }
        }
    }
    .meta__info {
        font-size: 12px;
        color: rgba(24,37,50,.3);
        >span:hover{
            color: #8b8b8b;
        }
        .meta__count {
            margin-right: 15px;
        }
    }
</style>
